<template>
  <div class="bgbox">
    <div class="boxleft" style="min-width: 230px">
      <el-input v-model="filterText" placeholder="Filter keyword" />
      <el-tree
        ref="treeRef"
        class="filter-tree"
        :data="treedata"
        :props="defaultProps"
        default-expand-all
        @node-click="pitchon"
        :filter-node-method="filterNode"
      />
    </div>
    <div class="boxright">
      <ProTable
        ref="proTable"
        :request-auto="false"
        :publicsb="boxright"
        :columns="columns"
        :data="Tabledata"
        :showhidden="showhidden"
        :search-col="{ xs: 1, sm: 1, md: 2, lg: 3, xl: 3 }"
        @darg-sort="dargSort"
        highlight-current-row
      >
        <!-- Expand -->
        <template #tableHeader>
          <el-button type="primary" :icon="CirclePlus" @click="addWiHaiYinSu('新增字典')">新增字典</el-button>
        </template>
        <!-- 表格操作 -->
        <template #operation="scope">
          <el-tooltip class="box-item" effect="dark" content="编辑" placement="top">
            <el-button type="primary" link :icon="EditPen" @click="addWiHaiYinSu(scope, '编辑字典')"></el-button>
          </el-tooltip>
          <el-tooltip class="box-item" effect="dark" content="删除" placement="top">
            <el-button type="primary" link :icon="Delete" @click="deleteZhxm(scope)"></el-button>
          </el-tooltip>
        </template>
      </ProTable>
    </div>
    <UserDrawer ref="userdrawerdata"></UserDrawer>
  </div>
</template>

<script setup lang="ts">
import UserDrawer from "@/views/DataMaintenance/Dictionarymaintenance/component/addzidian.vue";
import { ref, watch, reactive, onMounted } from "vue";
import { ElTree } from "element-plus";
import ProTable from "@/components/tablepublic/index.vue";
import {
  GetSelZiDianport,
  GetSqlZiDianMingXiport,
  DeleteZiDianMingXiDeleteport,
  PostZiDianMingXiAddport
} from "@/api/modules/user";
import { Delete, EditPen, CirclePlus } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
const proTable = ref<any>();
const boxright = ref("boxright");
interface Tree {
  [key: string]: any;
}
const userdrawerdata = ref();
const Tabledata = ref([]);
const filterText = ref("");
const treeRef = ref<InstanceType<typeof ElTree>>();
// 控制分页显示隐藏
const showhidden = ref<boolean>(false);
const defaultProps = {
  children: "children",
  label: "Name"
};

// 删除
const deleteZhxm = (scope: any) => {
  console.log(scope.row);
  ElMessageBox.confirm("确认删除吗？", "温馨提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    const data = {
      strZiDianId: scope.row.ZiDianID
    };
    DeleteZiDianMingXiDeleteport(data).then((res: any) => {
      console.log(res);
      if (res.Success == 0) {
        trigger();
        ElMessage({
          type: "success",
          message: "删除成功"
        });
      }
    });
  });
};

const strYiJiName = ref("");
const strErJiName = ref("");

const trigger = () => {
  const data = {
    strYiJiName: strYiJiName.value,
    strErJiName: strErJiName.value
  };
  GetSqlZiDianMingXiport(data).then((res: any) => {
    console.log(res);
    if (res.Success == 0) {
      Tabledata.value = res.Data;
    }
  });
};

const addWiHaiYinSu = (title: any, scope?: any) => {
  console.log(scope);

  if (strYiJiName.value == "" || strErJiName.value == "") {
    return ElMessage({ type: "error", message: "请先选择字典分类" });
  } else {
    const params = {
      strYiJiName: strYiJiName.value,
      strErJiName: strErJiName.value,
      title: title,
      api: title == "新增字典" ? PostZiDianMingXiAddport : "",
      Hideornot: true
    };
    userdrawerdata.value.acceptParams(params);
  }
};
const pitchon = (item: any, node: any) => {
  strYiJiName.value = node.parent.data.Name;
  strErJiName.value = item.Name;
  trigger();
};

watch(filterText, val => {
  treeRef.value!.filter(val);
});

onMounted(() => {
  immediately();
});

const immediately = () => {
  GetSelZiDianport().then((res: any) => {
    console.log(res);
    treedata.value = res.Data;
  });
};

const filterNode = (value: string, data: Tree) => {
  if (!value) return true;
  return data.Name.includes(value);
};

// 调序
const dargSort = (item: any) => {
  const data = {};
  console.log(data, item);
};

// 表格配置项
const columns = reactive<any>([
  { type: "index", label: "序号", width: 80 },
  { prop: "ZiDianZhiNeiRong", label: "字典值内容", width: 380 },
  { prop: "FenLei", label: "分类" },
  { prop: "PYM", label: "拼音码" },
  { prop: "BeiZhu1", label: "备注1" },
  { prop: "BeiZhu2", label: "备注2" },
  { prop: "ShiFouMoRen", label: "是否默认" },
  { prop: "operation", label: "操作", fixed: "right", width: 100 }
]);

const treedata = ref([]);
</script>

<style scoped lang="scss">
.bgbox {
  display: flex;
  width: 100%;
  height: 100%;
  .boxleft {
    width: 20%;
    overflow: auto;
  }
  .boxright {
    width: 80%;
  }
}
</style>
